import React, { Component } from 'react';

import { withRouter } from 'react-router-dom'
import "../styles/MyTabbar.css";
import img1 from "../images/iconbig (1).jpg";
import img2 from "../images/iconbig (2).jpg";
import img3 from "../images/iconbig (3).jpg";
import img4 from "../images/iconbig (4).jpg";
import img5 from "../images/iconbig (5).jpg";
class MyTabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { name: '店铺', img: img1, age: 1 },
                { name: '分类', img: img2, age: 2 },
                { name: '全部', img: img3, age: 3 },
                { name: '购物车', img: img4, age: 4 },
                { name: '个人 ', img: img5, age: 5 },
            ],
            currentIndex: 0,
        }
    }
    handleclick(index) {
        this.setState({
            currentIndex: index
        })
        // console.log(this.state.currentIndex,index);
        // console.log(this.props);
        if (index == 0) {
            this.props.history.push('/index/hom')
        }
        else if (index == 1) {
            this.props.history.push('/index/MyKill')
        }
        else if (index == 2) {
            this.props.history.push('/index/ProductPage/'+282657)
        }
        else if (index == 3) {
            this.props.history.push('/index/shopcart')
        }
        else if (index == 4) {
            this.props.history.push('/index/mine')
        }

    }
    render() {
        return (
            <div className='footer'>
                <ul>
                    {/* Link 组件默认会渲染成a标签 */}
                    {/* NavLink 组件默认会渲染成a标签, 有自带的js效果但是NavLink会维护自身active类的添加/移除 */}

                    {
                        this.state.list.map((item, index) => {
                            return (
                                <li key={item.age} style={{
                                    color: this.state.currentIndex === index ? 'red' : '',
                                    fontWeight: this.state.currentIndex === index ? 700 : 400
                                }}
                                    onClick={() => { this.handleclick(index) }} >
                                    {/* <img src={require(`../images/${item.img}.jpg`)} alt="" /> */}
                                    <img src={item.img} alt="" />
                                    <p>{item.name}</p>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

        );
    }
}

export default  withRouter(MyTabbar);